<template>
  <!-- <div>商品分类列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size="small" type="primary" @click="isShowAddCategory = true">新增分类</el-button>

      <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button>

      <el-input
        class="search input"
        size="small"
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable
      ></el-input>
      <el-input
        class="search input"
        size="small"
        v-model="form.cate_name"
        placeholder="输入分类名称查询"
        clearable
      ></el-input>
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="ID" prop="id" width="100"></el-table-column>
      <el-table-column label="分类名称" width="140">
        <template slot-scope="scope">
          {{scope.row.cate_name}}
          <!--<span class="cetain"
          v-if="scope.row.isCertain">（固定）</span>-->
        </template>
      </el-table-column>
      <el-table-column label="图标" >
        <template slot-scope="scope">
          <div class="img">
            <img
              style="width:50px;height: 50px"
              :src="scope.row.icon ? scope.row.icon : errorImg"
              alt
            />
          </div>
        </template>
      </el-table-column>

      <el-table-column label="关联选品库数量" prop="relation_product_count" width="140"></el-table-column>
      <!--      <el-table-column label='排序'-->
      <!--        prop='order_sort'></el-table-column>-->
      <el-table-column label="展示排序" width="100px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.order_sort"
            type="number"
            @blur="cateOrderSortChange(scope.row.id, scope.row.order_sort)"
          />
        </template>
      </el-table-column>

      <el-table-column label="是否设为红包兑换分类">
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.type"
            @change="isShopUseRedBagChange(scope.row.id,$event)"
          ></el-switch>
          <!-- <span>{{scope.row.type ==}}</span> -->
          <!-- <span v-else>已禁用</span> -->
        </template>
      </el-table-column>

      <el-table-column label="分类状态">
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.is_enable"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <span>{{scope.row.is_enable_word}}</span>
          <!-- <span v-else>已禁用</span> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="350">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="changeShopCate(scope.row)">修改</el-button>
          <!-- <el-button size='mini'
                               @click="gotoSaleDaily(scope.row.id)">销售日志
          </el-button>-->
          <el-button size="mini" @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增红包商品分类" :visible.sync="isShowAddCategory" width="640px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <el-form-item label="商品分类名称：" prop="cate_name">
          <el-input
            v-model="cateForm.cate_name"
            style="width:180px;"
            size="mini"
            placeholder="请输入商品分类名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品分类排序：" prop="order">
          <el-input
            v-model="cateForm.order_sort"
            style="width:140px;"
            size="mini"
            placeholder="0～99"
          ></el-input>
        </el-form-item>

        <el-form-item label="分类图标：" prop="icon">
          <uploadImg
            flieName="icon"
            class="icon_cate"
            :oldImgs="[cateForm.icon]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>

        <el-form-item label="分类专场图片：" prop="img_url">
          <uploadImg
            flieName="img_url"
            class="icon_cate"
            :oldImgs="[cateForm.img_url]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>
        <el-form-item label="banner链接：">
          <el-input
            v-model="cateForm.jump_link"
            style="width:320px;"
            size="mini"
            placeholder="请输入跳转链接"
          ></el-input>
          <p>分类链接支持跳转商品详情，输入商品ID即可</p>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="cateForm.is_enable">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label='分类限制购买次数：'>
                  <el-select style="width:130px;"
                    v-model="cateForm.limit"
                    filterable
                    size='mini'
                    placeholder="限制时间">
                    <el-option label='天'
                      value='1'></el-option>
                    <el-option label='周'
                      value='2'></el-option>
                    <el-option label='月'
                      value='3'></el-option>
                  </el-select>
                  <el-select style="width:130px;margin-left:12px;"
                    v-model="cateForm.limit_num"
                    filterable
                    size='mini'
                    placeholder="次数限制">
                    <el-option label='1次'
                      value='1'></el-option>
                    <el-option label='3次'
                      value='3'></el-option>
                    <el-option label='5次'
                      value='5'></el-option>
                    <el-option label='7次'
                      value='7'></el-option>
                    <el-option label='10次'
                      value='10'></el-option>
                    <el-option label='15次'
                      value='15'></el-option>
                    <el-option label='30次'
                      value='30'></el-option>
                    <el-option label='无限制'
                      value='0'></el-option>
                  </el-select>
        </el-form-item>-->
      </el-form>

      <div class="align">
        <el-button size="mini" @click="isShowAddCategory = false">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddCategory">确定</el-button>
      </div>
    </jdialog>

    <!--修改红包商品分类-->
    <jdialog title="修改红包商品分类" :visible.sync="isShowModifyCategory" width="640px">
      <el-form :model="modifyForm" :rules="modelrules" class="demo-ruleForm" label-width="140px">
        <el-form-item label="商品分类名称：" prop="cate_name">
          <el-input
            v-model="modifyForm.cate_name"
            style="width:180px;"
            size="mini"
            placeholder="请输入商品分类名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="商品分类排序：" prop="order">
          <el-input
            v-model="modifyForm.order_sort"
            style="width:140px;"
            size="mini"
            placeholder="0～99"
          ></el-input>
        </el-form-item>

        <el-form-item label="分类图标：" prop="icon">
          <uploadImg
            flieName="icon"
            class="icon_cate"
            :oldImgs="[modifyForm.icon]"
            :n="1"
            @getFile="getModifyFile"
          ></uploadImg>
          <p class="note">支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>

        <el-form-item label="分类专场图片：" prop="img_url">
          <uploadImg
            flieName="img_url"
            class="icon_cate"
            :oldImgs="[modifyForm.img_url]"
            :n="1"
            @getFile="getModifyFile"
          ></uploadImg>
          <p class="note">支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>

        <el-form-item label="banner链接：">
          <el-input
            v-model="modifyForm.jump_link"
            style="width:320px;"
            size="mini"
            placeholder="请输入跳转链接"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用：">
          <el-radio-group v-model="modifyForm.is_enable">
            <el-radio label="1">可用</el-radio>
            <el-radio label="0">不可用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="isShowModifyCategory = false">取消</el-button>
        <el-button size="mini" type="primary" @click="certainModifyCategory">确定</el-button>
      </div>
    </jdialog>
  </div>
</template>


<script>
import uploadImg from "@/components/uploadImg";
import {
  supplyproductCateList,
  productCateIsEnableUpdate,
  isShopUseRedBagChange,
  productCateCreate,
  productCateIdDelete,
  setCateOrderSort,
  productCateIDUpdate
} from "@/api/autarky";

export default {
  components: {
    uploadImg
  },
  data() {
    return {
      isShowAddCategory: false,

      isShowModifyCategory: false,
      showCate_id: "",

      form: {
        cate_id: "",
        cate_name: "",
        icon: "",
        page: 1,
        size: 20
      },

      total: 0,
      tableData: [],

      cateForm: {
        cate_name: "",
        icon: "",
        order_sort: "",
        img_url: "",
        jump_link: "",
        is_enable: "0"
      },
      rules: {
        cate_name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        order_sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        img_url: [{ message: "请上传分类专场图片", trigger: "blur" }],
        icon: [{ required: true, message: "请上传分类图标", trigger: "blur" }]
      },

      modifyForm: {
        cate_name: "",
        icon: "",
        order_sort: "",
        img_url: "",
        jump_link: "",
        is_enable: ""
      },
      modelrules: {
        cate_name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        order_sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        img_url: [{ message: "请上传分类专场图片", trigger: "blur" }],
        icon: [{ required: true, message: "请上传分类图标", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getsupplyproductCateListData();
  },
  methods: {
    //搜索数据
    searchCategoryData() {
      this.getsupplyproductCateListData();
    },
    pageChange(page) {
      this.form.page = page;
      //获取更多数据
      this.getsupplyproductCateListData();
    },
    //更改商品分类状态
    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      this.getproductCateIsEnableUpdateData(id, e);
    },
    // 修改红包提示
    isShopUseRedBagChange(id, e) {
      console.log(id,e)
      //更新成功后重新获取商品
      this.isShopUseRedBagChangeUpdateData(id, e);
    },
        //修改红包提示可用状态
    async isShopUseRedBagChangeUpdateData(id, type) {
      let res = await isShopUseRedBagChange(id, {
        type: type
      });
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
      } else {
        this.$message.error(res.message);
      }
    },

    //修改商品分类
    changeShopCate(data) {
      this.showCate_id = data.id;
      this.modifyForm = {
        cate_name: data.cate_name,
        order_sort: data.order_sort,
        icon: data.icon,
        img_url: data.img_url,
        jump_link: data.jump_link,
        is_enable: data.is_enable + ""
      };
      this.isShowModifyCategory = true;
    },
    //跳转销售日志
    gotoSaleDaily(id) {
      console.log(id);
      this.$router.push({
        path: "./privateorderlist",
        query: { cate_id: id }
      });
    },
    //删除商品分类
    deleteShopCate(id) {
      this.$confirm("确认删除该商品分类？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.getproductCateIdDeleteData(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //确定新增分类
    certainAddCategory() {
      this.getproductCateCreateData();
    },
    //确定修改分类
    certainModifyCategory() {
      this.getproductCateIDUpdateData();
    },
    //获取商品分类列表数据
    async getsupplyproductCateListData() {
      var url =
        "id=" +
        this.form.cate_id +
        "&cate_name=" +
        this.form.cate_name +
        "&page=" +
        this.form.page +
        "&is_enable=";
      let res = await supplyproductCateList(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    //更新商品分类可用状态
    async getproductCateIsEnableUpdateData(product_id, is_enable) {
      let res = await productCateIsEnableUpdate(product_id, {
        is_enable: is_enable
      });
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
      } else {
        this.$message.error(res.message);
      }
    },
    //新增商品分类
    async getproductCateCreateData() {
      let res = await productCateCreate(this.cateForm);
      if (res.code === 10000) {
        this.cateForm = {};
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //修改商品分类
    async getproductCateIDUpdateData() {
      let res = await productCateIDUpdate(this.showCate_id, this.modifyForm);
      if (res.code === 10000) {
        this.modifyForm = {};
        this.showCate_id = "";
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
        this.isShowModifyCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //删除商品分类
    async getproductCateIdDeleteData(cate_id) {
      console.log(cate_id);
      let res = await productCateIdDelete(cate_id);
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getsupplyproductCateListData();
      } else {
        this.$message.error(res.message);
      }
    },
    getFile(file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },

    getModifyFile(file) {
      this.modifyForm[file.name] =
        file.files.length > 0 ? file.files[0].url : "";
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    cateOrderSortChange(cate_id, orderSort) {
      const params = {
        order_sort: orderSort
      };
      setCateOrderSort(cate_id, params).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .top {
    margin-bottom: 20px;

    .search {
      float: right;
      margin-left: 12px;
    }

    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }

  .demo-ruleForm {
    padding: 20px;
  }

  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }

  .align {
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
